<div id="content">
    <div class="row s_page_title">
        <sa-big-breadcrumbs [items]="['环卫管理','小区清运统计']" icon="fa fa-cube" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    </div>
    <sa-widgets-grid>
        <div class="s_table">
            <div sa-widget [editbutton]="false" color="darken" class="clearfix">
                <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>小区清运统计</h2></header>
                <div>
                    <div class="widget-body no-padding">
                        <div class="page-header clearfix s_table_opreation">
                            <div class="left page-header-btn">
                                <!-- <sa-company-tree-car companyTreeId="companyTree" (companySelected)="companySelected($event)"></sa-company-tree-car> -->
                                <div class="selectDate top_module">
                                    <table-select-date [notInit]='true' (outerTime)="getSelectTableTime($event)" [specifyTime]='initDateRange'></table-select-date>
                                </div>
                                <button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
                                <!-- <button type="button" class="btn btn-primary" (click)="exportData()">导出</button> -->
                            </div>
                            <div class="right top-search">
                                <input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input" placeholder="小区名称,省,市,区名称">
                                <span class="top-search-box">
							        <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
							    </span>
                            </div>
                        </div>
                        <div class="table_scroll">
                            <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                <thead>
                                    <tr>
                                        <th>小区名称</th>
                                        <th>省</th>
                                        <th>市</th>
                                        <th>区</th>
                                        <th>重量</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let row of resultTableData">
                                        <td>{{row.communityName}}</td>
                                        <td>{{row.provinceName}}</td>
                                        <td>{{row.cityName}}</td>
                                        <td>{{row.areaName}}</td>
                                        <td>{{row.weight}}</td>
                                        <td>{{row.startTime}}</td>
                                        <td>{{row.endTime}}</td>
                                        <td>
                                            <button type="button" (click)="showDetail(row,DetailModal)">查看明细</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table-fix clearfix">
                            <paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
                            </paginator>
                            <button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </sa-widgets-grid>
    <!-- 明细 -->
    <div bsModal #DetailModal="bs-modal" id="DetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="overflow: auto;">
        <div class="modal-dialog modal-lg" style="width: 1200px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="cancelDetailModal(DetailModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">查看明细</h4>
                </div>
                <div class="modal-body" style="padding: 15px;height: 600px;overflow-y: auto;">
                    <div class="table_scroll">
                        <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                            <thead>
                                <tr>
                                    <th>RFID</th>
                                    <th>车牌号码</th>
                                    <th>设备ID</th>
                                    <th>详细地址</th>
                                    <th>重量更新时间</th>
                                    <th>GPS更新时间</th>
                                    <th>经度</th>
                                    <th>纬度</th>
                                    <th>单桶重量</th>
                                </tr>
                            </thead>
                            <tbody>

                                <tr *ngFor="let row of DetailTableData; let i = index" [attr.data-index]="i" [ngClass]='{selected: row.isChecked }'>
                                    <td>{{row.rfid}}</td>
                                    <td>{{row.carNumber}}</td>
                                    <td>{{row.deviceId}}</td>
                                    <td>{{row.address}}</td>
                                    <td>{{row.carUploadDate}}</td>
                                    <td>{{row.gpsUploadDate}}</td>
                                    <td>{{row.lng}}</td>
                                    <td>{{row.lat}}</td>
                                    <td>{{row.weight}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 明细 end-->
</div>